<template>
  <div :class="prefixCls">
    <quill-editor
      ref="BaseEditor"
      v-model="content"
      :options="editorOption"
      :disabled="disabled"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    />

    <Base-Gallery v-model="galleryVisiable" :tab="5" @select="selectHandle" />
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
  [{ direction: 'rtl' }], // text direction

  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean'] // remove formatting button
]

export default {
  name: 'BaseEditor',
  components: {
    quillEditor
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    const that = this
    return {
      galleryVisiable: false,
      // TODO: placeholder实例化后更改无效，国际化？
      editorOption: {
        placeholder: '请填写内容',
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function(value) {
                if (value) {
                  // alert('自定义图片')
                  that.galleryVisiable = true
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  computed: {
    content: {
      get: function() {
        return this.value
      },
      set: function(newValue) {
        this.$emit('input', newValue)
      }
    }
  },
  mounted() {
    // const toolbar = this.$refs.BaseEditor.quill.getModule('toolbar')
    // toolbar.addHandler('image', value => console.log(value))
  },
  methods: {
    selectHandle(imageSrc) {
      // console.log(imageSrc)
      // 获取富文本组件实例
      const quill = this.$refs.BaseEditor.quill

      const range = quill.getSelection()
      let index = 0
      if (range) {
        if (range.length === 0) {
          index = range.index
        } else {
          index = range.index + range.length
        }
      }
      // 如果上传成功
      if (imageSrc) {
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(index, 'image', imageSrc)
        // 调整光标到最后
        quill.setSelection(index + 1)
      } else {
        // 提示信息，需引入Message
        console.log('图片插入失败')
      }
    },
    onEditorBlur(quill) {},
    onEditorFocus(quill) {},
    onEditorReady(quill) {},
    onEditorChange({ quill, html, text }) {
      this.$emit('change', html)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('@/assets/styles/theme.less');
/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.ant-editor-quill {
  line-height: 1.5;
  /deep/ .ql-editor {
    min-height: 150px;
    max-height: 300px;
  }
  /deep/ .ql-toolbar.ql-snow {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
  /deep/ .ql-container.ql-snow {
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }
  /deep/ .ql-image {
    // display: none;
  }
  /deep/ .ql-video {
    display: none;
  }
}
</style>
